<script setup lang="ts">
import { moviePinia } from '../stores/home'
import { storeToRefs } from 'pinia'
import { ref,onMounted,computed } from 'vue'
import {seat} from '../api/api'
import { useRouter } from 'vue-router'
import { showToast } from 'vant';
const router = useRouter();
const movieStore = moviePinia()
const {cinemaNamePinia,movieNamePinia,hallPinia,langPinia,typePinia,chooseDayPinia,durationPinia,price,cinemaIdPinia,movieIdPinia,imgPinia,order} = storeToRefs(movieStore)
const getSeat = async ()=>{
    let {data} = await seat()
    seats.value = data.seat.regions[0].rows;
    seatLegends.value = data.seat.image.seatLegends
    console.log(seats.value);
    console.log(selectedSeats.value);
    

}
const seats = ref()
// const selectedSeats = ref()
const seatLegends = ref()
const choose = (e:any,row:number,col:number)=>{
    let seatStatus = e.target.getAttribute('data-status')
    // console.log(row,col,seatStatus);
    switch (seatStatus) {
        case '0':
            e.target.setAttribute('data-status',1)
            e.target.style.backgroundImage = `url(http://p0.meituan.net/moviemachine/80c67d1a9af433466453c69d29f32888742.png)`
            seatList.value = [{row,col,seatStatus:'2'},...seatList.value]
            // console.log(seatList.value);
            break;
        case '1':
            e.target.setAttribute('data-status',0)
            e.target.style.backgroundImage = `url()`
            seatList.value.forEach((element,index) => {
                if(element.row===row&&element.col===col){
                    seatList.value.splice(index,1)
                }
            });
            break;
        default:
            break;
    }
    
}
const seatList = ref([])
const totalPrice = computed(()=> seatList.value.length*price.value*10/10)
// const del = (row,col,index)=>{
//     seatList.value.splice(index,1)
// }
const show = ref(false)
const showPay = ()=>{
    show.value = true
}
const close = ()=>{
    show.value = false
}
const identifier = ref('23684808632')
const checked = ref('1');

const password = ref('');
const showKeyboard = ref(true);
const showPsw = ref(false)
const surePay = ()=>{
    showPsw.value = true
}
const payed =()=>{
    if(password.value!='123456'){
        showToast('请输入正确的密码');
        password.value = ''
    }else{
        showPsw.value = false
        show.value = false
        seatLis.value.forEach(el=>{
            if(el.dataset.status=='1'){
                el.setAttribute('data-status',2)
                el.style.backgroundImage = `url(http://p0.meituan.net/moviemachine/2976af246e5fab4f72c52fac9f20ba521398.png)`
            }
        })
        movieStore.addOrder(imgPinia.value,movieNamePinia.value,typePinia.value,movieIdPinia.value,cinemaIdPinia.value,totalPrice.value,seatList.value,chooseDayPinia.value,durationPinia.value,hallPinia.value,cinemaNamePinia.value)
        seatList.value = []
        showToast('支付成功')
    }
}
const seatLis = ref([])
const seatLi = (el:any) =>{
    selectedSeats.value?.forEach(element => {
        if(element.row==el?.getAttribute('data-row')&&element.col==el?.getAttribute('data-col')){
            el.setAttribute('data-status',2)
                el.style.backgroundImage = `url(http://p0.meituan.net/moviemachine/2976af246e5fab4f72c52fac9f20ba521398.png)`
        }
    });
    seatLis.value.push(el)
}

const selectedSeats = ref()
onMounted(() => {
    getSeat()
    console.log(order.value);
    order.value?.forEach(el=>{
        if(el.cinemaId==cinemaIdPinia.value&&el.movieId==movieIdPinia.value&&el.hall==hallPinia.value&&el.date==chooseDayPinia.value&&el.time==durationPinia.value){
            selectedSeats.value = el.seatList
            console.log(el.seatList);
        }
    })
})
</script>

<template>
    <header>
        <van-icon name="arrow-left" @click="router.go(-1)"/>
        {{ cinemaNamePinia }}
    </header>
    <div class="seat">
        <div class="screen">
            {{ hallPinia }}银幕
        </div>
        <ul class="row">
            <li v-for="row in seats" :key="row.rowId">
                <ol class="col">
                    <li v-for="(col,index) in row.seats" :key="index" :class="col.columnId===''?'no-seat':''" data-status="0" :data-row="row.rowId" :data-col="col.columnId" @click="choose($event,row.rowId,col.columnId)" :ref="seatLi"> </li>
                </ol>
            </li>
        </ul>
    </div>
    <div class="bottom">
        <ul class="top">
            <li v-for="el in seatLegends">
                <img :src="el.legendIcon" alt="">
                <span>{{ el.legendName }}</span>
            </li>
        </ul>
        <div class="info">
            <div class="movie-info">
                <p class="movie-name">{{ movieNamePinia }}</p>
                <p>
                    <span>{{ chooseDayPinia }}</span>
                    <span>{{ durationPinia }}</span>
                    <span>{{ langPinia }}{{ typePinia }}</span>
                </p>
            </div>
            <div class="tickets">
                <div class="ticket-item" v-for="(el,index) in seatList" :key="index">
                    <div class="left">
                        <p>{{ el.row }}排{{ el.col }}座</p>
                        <p>{{ price }}</p>
                    </div>
                </div>
            </div>
        </div>
        <button @click="showPay">{{ totalPrice===0?'':totalPrice+'元' }}  确认选座</button>

    </div>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '90%' }">
        <div class="header">
            <span>支付订单</span> 
            <span class="cancel" @click="close">取消</span>
        </div>
        <div class="ticket-info">
            <div class="icon">
                <svg t="1679664529210" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5631"><path d="M870.4 1024H153.6a51.2 51.2 0 0 1-51.2-51.2V716.8a51.2 51.2 0 0 1 102.4 0v204.8h614.4V716.8a51.2 51.2 0 0 1 102.4 0v256a51.2 51.2 0 0 1-51.2 51.2zM1024 358.4a51.2 51.2 0 0 0-8.6016-28.40576l-204.8-307.2A51.2 51.2 0 0 0 768 0H256a51.2 51.2 0 0 0-42.5984 22.79424l-204.8 307.2A51.2 51.2 0 0 0 0 358.4v76.8A128.14336 128.14336 0 0 0 128 563.2c98.4064 0 127.93856-102.4 128-102.4 11.89888 58.34752 66.19136 102.4 128 102.4 98.4064 0 127.93856-102.4 128-102.4 11.89888 58.34752 66.19136 102.4 128 102.4 98.4064 0 127.95904-102.4 128-102.4 11.89888 58.34752 66.19136 102.4 128 102.4a128.14336 128.14336 0 0 0 128-128z" fill="#ffffff" p-id="5632"></path></svg>
            </div>
            <div class="text">
                <p class="tatal">￥{{ totalPrice }}</p>
                <p class="identifier">订单编号{{ identifier }}</p>
            </div>
        </div>
        <div class="pay-way">
            <van-radio-group v-model="checked">
                <van-radio name="1" label-position="left">
                    <svg t="1679665228522" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6326" width="200" height="200"><path d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z" fill="#15BA11" p-id="6327"></path></svg>
                    <span>微信支付</span> 
                </van-radio>
                <van-radio name="2" label-position="left"><svg t="1679665431376" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8340" width="200" height="200"><path d="M230.404 576.536c-12.087 9.728-25.043 23.93-28.805 41.984-5.12 24.666-1.069 55.541 22.728 79.761 28.828 29.362 72.637 37.398 91.56 38.779 51.4 3.717 106.184-21.772 147.477-50.844 16.184-11.42 43.899-34.349 70.39-69.721-59.37-30.653-133.477-64.557-212.703-61.24-40.47 1.692-69.454 10.084-90.647 21.281z m752.859 135.545C1009.463 650.574 1024 582.968 1024 512 1024 229.688 794.335 0 512 0 229.665 0 0 229.688 0 512c0 282.335 229.665 512 512 512 170.385 0 321.491-83.723 414.631-212.124-87.997-43.742-233.027-115.734-322.36-159.299-42.63 48.596-105.65 97.303-176.84 118.495-44.722 13.29-85.037 18.365-127.199 9.75-41.739-8.548-72.481-28.093-90.401-47.683-9.127-9.995-19.612-22.706-27.203-37.82a71.25 71.25 0 0 0 1.202 3.049s-4.363-7.524-7.702-19.5a85.994 85.994 0 0 1-3.34-18.143 93.517 93.517 0 0 1-0.2-13.045c-0.378-7.702-0.066-15.783 1.67-24.064 4.185-20.235 12.822-43.81 35.172-65.692 49.063-48.039 114.777-50.621 148.814-50.42 50.421 0.289 138.04 22.35 211.812 48.439 20.436-43.52 33.547-90.068 42.007-121.1H305.308v-33.168h157.518v-66.337H272.139v-33.169h190.687v-66.315c0-9.105 1.803-16.584 16.584-16.584h74.619v82.899h207.293v33.169H554.029v66.337h165.82s-16.65 92.828-68.719 184.32c115.557 41.272 278.128 104.849 332.133 126.086z" fill="#1296DB" p-id="8341"></path></svg>
                    <span>支付宝支付</span>
                    </van-radio>
            </van-radio-group>
        </div>
        <div class="sure">
            <div class="btn" @click="surePay">确认支付 
                <span>￥{{ totalPrice }}</span>
            </div>
        </div>
        <div class="psw" v-if="showPsw">
            <!-- 密码输入框 -->
            <van-password-input
            :value="password"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            />
            <!-- 数字键盘 -->
            <van-number-keyboard
            v-model="password"
            :show="showKeyboard"
            @blur="showKeyboard = false"
            />
            <div class="paying">
                <span @click="payed">支付</span>
            </div>
        </div>
        
    </van-popup>
</template>

<style lang="scss" scoped>
header{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #fff;
    .van-icon{
        position: absolute;
        left: 15px;
        font-size: 18px;
        color: #e54847
    }
}
.seat{
    padding-top: 10px;
    text-align: center;
    background-color: #f0f0f0;
    height: 80vh;
    overflow: hidden;
    .row{
        margin-top: 30px;
        width: 100vw;
        overflow: auto;
        padding-bottom: 50vh;
    }
    .col{
        display: flex;
        li{
            padding: 10px;
            background-color: #fff;
            border: 1px solid rgb(204,204,204);
            margin: 4px;
            border-radius: 5px;
            background-size: cover;
        }
        .no-seat{
            visibility: hidden;
        }
        
    }
}
.bottom{
    width: 100%;
    background-color: #f0f0f0;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top{
        width: 100%;
        height: 30px;
        align-items: center;
        display: flex;
        li{
            margin-left: 15px;
            display: flex;
            align-items: center;
            img{
                width: 20px;
                height: 20px;
            }
            span{
                color: #999;
                font-size: 14px;
                margin-left: 3px;
            }
        }
        
    }
    .info{
        width: 90%;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        max-height: 90px;
        overflow: hidden;
        margin-bottom: 10px;
        p{
            font-size: 14px;
            color: #777;
            span{
                margin-right: 8px;
            }
        }
        .movie-name{
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .tickets{
            margin-top: 5px;
            display: flex;
            overflow-x: auto;
            padding-bottom: 25px;
            .ticket-item{
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin-right: 5px;
                background-color: #f0f0f0;
                padding: 5px;
                p{
                    color: #333;
                }

            }
        }
    }
    button{
        background-color: #f50;
        color: #fff;
        outline: none;
        border: none;
        width: 90%;
        margin: 0 auto;
        border-radius: 999px;
        height: 30px;
    }
}
.van-popup{
    .header{
        height: 50px;
        padding: 15px;
        box-sizing: border-box;
        background-color: #e54847;
        display: flex;
        align-items: center;
        color: #fff;
        justify-content: center;
        position: relative;
        .cancel{
            position: absolute;
            right: 15px;
            font-size: 12px;
            border: 1px solid #fff;
            padding: 5px 8px;
            border-radius: 999px;
        }
    }
    .ticket-info{
        display: flex;
        height: 100px;
        align-items: center;
        border-bottom: 1px dashed #999;
        box-sizing: border-box;
        padding: 15px 30px;
        .icon{
            width: 50px;
            height: 50px;
            background-color: #f90;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            svg{
                border-radius:0;
                width: 25px;
                height: 25px;
            }
        }
        .text{
            margin-left: 15px;
            .tatal{
                font-size: 20px;
            }
            .identifier{
                margin-top: 5px;
                font-size: 12px;
            }
        }
    }
    .pay-way{
        .van-radio{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #eee;
            svg{
                width: 25px;
                height: 25px;
                margin-right: 15px;
            }
        }
        
    }
    .sure{
        position: fixed;
        bottom: 30px;
        width: 100%;display: flex;
        justify-content: center;
    }
    .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        width: 90%;
        color: #fff;
        font-size: 14px;
        background-color: rgb(254,155,2);
        span{
            font-size: 24px;
        }
    }
    .psw{
        position: absolute;
        bottom: 0;
        background-color: #fff;
        width: 100%;
        height: 50vh;
        text-align: center;
        .paying{
            color: #fff;
            margin-top: 10px;
            position: absolute;
            width: 100%;
            bottom: 30px;
            span{
                background-color: #f90;
                padding: 10px 38px;
            }
        }
    }
}
</style>